<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                  <span class="container-title-p">
                    BTM机器管理
                    <i class="iconfont icon-jiantou"></i>
                  </span>
                  <span>日志查看</span>
                  </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <el-select v-model="selectLog" @change='selectType' size='small' placeholder="请选择类型">
                <el-option 
                v-for="item in typeLog"
                :key='item.key'
                :label='item.text'
                :value="item.key">
                </el-option> 
              </el-select>
            <!-- <el-input v-if='(selectLog=="qk")||(selectLog=="ck")' v-model="params.code" clearable placeholder="筛选：交易订单号" class="handle-input mr10"  style="width:200px;" size="small"></el-input> -->
            <el-input v-if='(selectLog=="qc")||(selectLog=="bc")' v-model="params.id" clearable placeholder="筛选：编号" class="handle-input mr10"  style="width:200px;" size="small"></el-input>
            <!-- <el-select v-model="params.country" placeholder="筛选国家" @focus="getCountry" clearable  class="handle-select mr10" size="small">
                <el-option
                v-for="(item,index) of country"
                :key="index"
                :label="item.chineseName"
                :value="item.id"
                >

                </el-option> -->
                <!-- <el-option v-for="(type_item,index) in typeCenter" :key="index" :label="type_item.a_type_name" :value="type_item.a_tid"></el-option> -->
            <!-- </el-select> -->
            <el-input v-model="params.btmCode" clearable placeholder="筛选：设备编号" class="handle-input mr10"  style="width:200px;" size="small"></el-input>
            <el-date-picker
            clearable
            class="handle-date"
            @change='showSelect'
            v-model="select_date"
            type="datetimerange"
            :picker-options="pickerOptions2"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
            </el-date-picker>
            <el-button type="primary" icon="el-icon-search" @click="getLogData" size="small">搜索</el-button>
            <el-button style="margin-top:20px;margin-left:0;" type="default"   icon="el-icon-upload" class="handle-del mr10" @click="expendToExcel" v-if='selectLog' size="small">导出到excel</el-button>
        </div>
        <el-table v-show="selectLog=='ck'" :data="tableData.ckData" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
            <el-table-column prop="id" label="流水号"> </el-table-column>
            <el-table-column prop="btm.code" label="设备编号"> </el-table-column>
            <el-table-column prop="transactionId" label="交易号" align='center'>
            </el-table-column>
            <el-table-column prop="amount" label="金额" sortable align='center'>
            </el-table-column>
            <el-table-column prop="category" label="类型" :formatter="setType" align='center'>    
            </el-table-column>
            <el-table-column prop="createTime" sortable label="操作时间" align='center'>
            </el-table-column>
            <el-table-column sortable label="操作" align='center'>
              <template slot-scope="scope">
                <el-button type='primary' size='small' @click='detail(scope.row)'>查看详情</el-button> 
              </template>
            </el-table-column>
         </el-table>
         <el-table v-show="selectLog=='qk'" :data="tableData.qkData" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
            <el-table-column prop="id" label="流水号"> </el-table-column>
            <el-table-column prop="btm.code" label="设备编号"> </el-table-column>
            <el-table-column prop="transactionId" label="交易号" align='center'>
            </el-table-column>
            <el-table-column prop="amount" label="金额" sortable align='center'>
            </el-table-column>
            <el-table-column prop="category" label="类型" :formatter="setType" align='center'>    
            </el-table-column>
            <el-table-column prop="createTime" sortable label="操作时间" align='center'>
            </el-table-column>
            <el-table-column sortable label="操作" align='center'>
              <template slot-scope="scope">
                <el-button type='primary' size='small' @click='detail(scope.row)'>查看详情</el-button> 
              </template>
            </el-table-column>
         </el-table>
        <el-table v-show=" selectLog=='qc'" :data="tableData.qcData" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
            <el-table-column prop="id" label="编号" align='center'> </el-table-column>
            <el-table-column prop="btm.code" label="设备编号"> </el-table-column>
            <el-table-column prop="operator.username" label="操作员" align='center'>
            </el-table-column>
            <el-table-column prop="amount" label="金额" sortable align='center'>
            </el-table-column>
            <el-table-column prop="category" label="类型" :formatter="setType" align='center'>    
            </el-table-column>
            <el-table-column prop="createTime"  sortable  label="操作时间" align='center'>
            </el-table-column>
            <el-table-column sortable label="操作" align='center'>
              <template slot-scope="scope">
                <el-button type='primary' size='small' @click='detail(scope.row)'>查看详情</el-button> 
              </template>
            </el-table-column>
         </el-table>
         <el-table v-show=" selectLog=='bc'" :data="tableData.bcData" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
            <el-table-column prop="id" label="编号" align='center'> </el-table-column>
            <el-table-column prop="btm.code" label="设备编号"> </el-table-column>
            <el-table-column prop="operator.username" label="操作员" align='center'>
            </el-table-column>
            <el-table-column label="数量" sortable align='center'>
               <template slot-scope="scope">
                <span style='font-size: 0.8rem;'>小额钱箱：{{scope.row.boxData&&scope.row.boxData[0].num}}</span>
                <br>
                <span style='font-size: 0.8rem;'>大额钱箱：{{scope.row.boxData&&scope.row.boxData[1].num}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="amount" label="金额" sortable align='center'>
            </el-table-column>
            <el-table-column prop="category" label="类型" :formatter="setType" align='center'>    
            </el-table-column>
            <el-table-column prop="createTime"  sortable  label="操作时间" align='center'>
            </el-table-column>
            <el-table-column sortable label="操作" align='center'>
              <template slot-scope="scope">
                <el-button type='primary' size='small' @click='detail(scope.row)'>查看详情</el-button> 
              </template>
            </el-table-column>
         </el-table>
         <!-- <el-table  v-show="selectLog=='wx'" :data="fixCenter" border style="width:100%" ref="multipleTable" @selection-change="handleSelectionChange">
            <el-table-column prop="id"  label="编号"> </el-table-column align='center'>
            <el-table-column prop="account"  label="操作员"> </el-table-column align='center'>
            <el-table-column prop="content"  label="维修内容" > </el-table-column align='center'>
            <el-table-column prop="time"  label="操作时间" sortable></el-table-column align='center'>
         </el-table> -->
        <div class="pagination">
            <el-pagination  @current-change ="handleCurrentChange"
                    :page-size="params.size"
                    layout="prev, pager, next"
                    :total="all_page">
            </el-pagination>
        </div>
        <el-dialog :visible.sync='detailLog'
        title='详情'>
          <el-form>
            <el-form-item label='流水号：'>
              {{logData.id}}
            </el-form-item>
            <el-form-item label='设备名称：'>
              {{logData.btm.name}}
            </el-form-item>
            <el-form-item label='设备编号：'>
              {{logData.btm.code}}
            </el-form-item>
            <el-form-item label='操作账户：'>
              {{(logData.user&&logData.user.detail.username)||(logData.operator&&logData.operator.username)}}
            </el-form-item>
            <el-form-item label='金额：'>
              {{logData.amount}}
            </el-form-item>
            <el-form-item label='类型：'>
              {{logData.category==0?'存款':logData.category==1?'取款':logData.category==2?'补钞':'取钞'}}
            </el-form-item>
            <el-form-item label=' 盒子操作列表：' v-for="(item,index) of logData.boxData" :key='index' v-if='item.num'>
               数量：{{item.num}} <span class='itemType-small'>({{item.type==0?'小额取款箱':item.type==1?'大额取款箱':'存款箱'}})</span>
            </el-form-item>
             <el-form-item label='操作时间：'>
              {{logData.createTime}}
            </el-form-item>
            <el-form-item label='备注：'>
              {{logData.remark}}
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
             <el-button type="success" @click='closeEdit' size='small'>返回</el-button>
          </span>
        </el-dialog>
    <loading v-if="loading" :tip='tip'></loading>
    </div>
</template>

<script>
import * as rpConfig from "../../../../rpConfig/constant";
import { HttpReq } from "../../../service/server";
import {apiGet,api,apiPost} from "@/api/index";
import loading from "@/components/common/loading.vue";
import axios from 'axios';
import {expendExcel} from '@/service/expendExcel';
var Server = new HttpReq();
export default {
  data() {
    return {
      detailLog:false,
      loading:false,
      tip:'',
      country:[],
      params:{
        // code:'',
        page:0,
        size:10,
        id:'',
        btm:"",
        btmCode:null,
        country:'',
        type:'',
        category:'1',
        startTime:'',
        endTime:'',
      },
      tableData:{
        ckData:[],
        qkData:[],
        bcData:[],
        qcData:[],
      },
      logData:{
        btm:{

        },
        user:{
          detail:{

          },
        },
        boxData:[{

        }]
      },
      url: "./static/vuetable.json",
      userCrashCenter: [],
      servicingCenter:[],
      fixCenter:[],
      typeCenter: [],
      cur_page: 1,
      all_page: 1,
      multipleSelection: [],
      select_cate: "",
      select_word: "",
      del_list: [],
      is_search: false,
      startTime: "",
      endTime: "",
      select_date:[],
      pickerOptions2: {
          shortcuts: [{
              text: '最近一周',
              onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
              }
          }, {
              text: '最近一个月',
              onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
              }
          }, {
              text: '最近三个月',
              onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
              }
          }]
      },
      typeLog: [
        {
          key: "qk",
          text: "取款日志"
        },
         {
          key: "ck",
          text: "存款日志"
        },
        {
          key: "bc",
          text: "补钞记录"
        },
        {
          key: "qc",
          text: "取钞记录"
        }
      ],
      selectLog: "",
      setNewGroup: false,
      uShowName: "",
      uTel: "",
      uId: 0,
      u_remark: "",
      u_typename: ""
    };
  },
  created() {
      this.userCrashCenter=[{"id":"123456","number":300,"type":"1","account":"18817773658","time":"2018-12-03"},{"id":"123456","number":300,"type":"1","account":"18817773658","time":"2018-12-03"}];
      this.servicingCenter=[{"id":"123456","number":300,"type":"1","account":"BTM管理员","time":"2018-12-03"},{"id":"123456","number":300,"type":"1","account":"BTM管理员","time":"2018-12-03"}];
      this.fixCenter=[{"id":"123456","content":"更换内存条","account":"BTM管理员","time":"2018-12-03"},{"id":"123456","content":"修正数钱模块","account":"BTM管理员","time":"2018-12-03"}];
    //this.getData()
    // this.getType()
  },
  computed: {},
  components:{
    loading
  },
  methods: {
    expendToExcel(){
      // console.log('sss')
      this.loading=true;
      expendExcel('http://118.31.10.184/api/btm-operation-log/export',this.params,['startTime','endTime','btmCode','btm','category']).then(res=>{
        this.loading=false;
      })
    },
    showSelect(){
        // //console.log(this.select_date);
        var pecker=[];
        if(this.select_date){
        this.select_date.map(item=>{
            var date = item; //日期对象
            var now = "";
            now = date.getFullYear()+"-"; //读英文就行了
            now = now + (date.getMonth()+1)+"-";//取月的时候取的是当前月-1如果想取当前月+1就可以了
            now = now + date.getDate()+" ";
            now = now + date.getHours()+":";
            now = now + date.getMinutes()+":";
            now = now + date.getSeconds()+"";
            // //console.log(now)
            pecker.push(now);
        })
        this.params.startTime=pecker[0];
        this.params.endTime=pecker[1];
        }else{
            this.params.startTime='';
            this.params.endTime='';
        }
    },
    selectType(val){
      // this.params.page=0;
      switch(val){
        case 'ck':
          this.params.category=0;
          this.getLogData();
        ;break;
        case 'qk':
        this.params.category=1;
        this.getLogData();
        ;break;
        case 'bc':
        this.params.category=2;
        this.getLogData();
        ;break;
        case 'qc':
        this.params.category=3;
        this.getLogData();
        ;break;
      }
    },
    handleCurrentChange(val) {
      this.cur_page = val;
      // this.getData();
      this.params.page=val-1;
      this.getLogData();
    },
    detail(row){
      this.loading=true;
      this.tip='获取日志详情';
      apiGet.drive.btmLog({},true,row.id).then(res=>{
        this.detailLog=true;
        this.logData=res;
        this.loading=false;
      })
    },
    getData() {
      let self = this;
      Server._POST(
        rpConfig.API_URI + "/muser.Index/getUserByCon",
        {
          page: self.cur_page,
          a_type_id: self.select_cate,
          keyword: self.select_word
        },
        function(res) {
          self.newsCenter = res.data.data;
          self.all_page = Math.ceil(res.data.num / res.data.pagesize) * 10;
        }
      );
    },
    // expendToExcel() {
    //   let self = this;
    //   let typeid = self.select_cate ? self.select_cate : 0;
    //   let keyword = self.select_word ? self.select_word : "";
    //   ////console.log(rpConfig.API_URI + '/muser.Excel/expendUser?a_type_id='+typeid+"&keyword="+ keyword)

    //   Server._DOWNLOAD_FILE(
    //     rpConfig.API_URI +
    //       "/muser.Excel/expendUser?a_type_id=" +
    //       typeid +
    //       "&keyword=" +
    //       keyword
    //   );
    // },
    getType() {
      let self = this;
      Server._POST(rpConfig.API_URI + "/muser.Index/getUserGroup", {}, function(
        response
      ) {
        self.typeCenter = response.data;
      });
    },
    setType(row) {
        switch(this.selectLog){
            case "qk":
            return "取款"
            case "ck":
            return "存款"
            case "bc":
            return "补钞"
            case "qc":
            return "取钞"
        }
      return row.u_nickname + "(" + row.u_truename + ")";
    },
    setPosition(row) {
      return row.u_province + "(" + row.u_city + ")";
    },
    closeEdit() {
      this.setURemark = false;
      this.detailLog=false;
    },
    moveGroup(row) {
      this.setNewGroup = true;
      this.u_typename = row.a_type_name;
      this.uId = row.u_uid;
    },
    saveURemark() {
      let self = this;
      Server._POST(
        rpConfig.API_URI + "/muser.Index/setURemark",
        { item_id: self.uId, uremark: self.u_remark },
        function(response) {
          self.$message.success(response.msg);
          self.closeEdit();
          setTimeout(() => {
            self.getData();
          }, 2000);
        }
      );
    },
    moveToNewGroup(groupdId, groupName) {
      let self = this;
      if (groupName == this.u_typename) {
        this.$message.error("已经属于该分组");
        return fasle;
      }
      Server._POST(
        rpConfig.API_URI + "/muser.Index/setUGroup",
        { item_id: self.uId, groupId: groupdId },
        function(response) {
          self.$message.success(response.msg);
          self.setNewGroup = false;
          setTimeout(() => {
            self.getData();
          }, 2000);
        }
      );
    },
    filterTag(value, row) {
      return row.tag === value;
    },

    handleEdit(row) {
      this.uShowName = row.u_nickname + "(" + row.u_truename + ")";
      this.uTel = row.u_tel;
      this.setURemark = true;
      this.uId = row.u_uid;
      this.u_remark = row.u_remark;
    },
    handleDelete(row) {
      let self = this;
      Server._POST(
        rpConfig.API_URI + "/muser.Index/deleteUserItem",
        { item_id: [row.u_uid] },
        function(response) {
          self.$message.success(response.msg);
          self.getData();
        }
      );
    },
    delAll() {
      const self = this,
        length = self.multipleSelection.length;
      let delArr = [];
      for (let i = 0; i < length; i++) {
        delArr.push(self.multipleSelection[i].u_uid);
      }
      if (delArr.length == 0) {
        self.$message.info("请选择要删除的记录");
      } else {
        Server._POST(
          rpConfig.API_URI + "/muser.Index/deleteUserItem",
          { item_id: delArr },
          function(response) {
            self.$message.success(response.msg);
            self.getData();
          }
        );
      }

      self.multipleSelection = [];
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getLogData(){
      this.loading=true;
      this.tip='获取日志列表';
      this.params.btmCode=this.params.btmCode?this.params.btmCode:null;//特殊字段，需要传null
      apiGet.drive.btmLog(this.params).then(res=>{
        this.loading=false;
        this.tableData={
          ckData:[],
          qkData:[],
          bcData:[],
          qcData:[],
        };
        this.all_page=res.totalElements;
        //console.log(res);
        let data=res.content;
        data.forEach(element => {
          //category==0存款,category==1取款，category==2补钞，category==3取钞
          if(element.category==0){
            this.tableData.ckData.push(element);
          }else if(element.category==1){
            this.tableData.qkData.push(element);
          }else if(element.category==2){
            this.tableData.bcData.push(element);
          }else if(element.category==3){
            this.tableData.qcData.push(element);
          }
        });
      })
    },
    getCountry(page=0){
      var params={
        page:page,
        size:10,
      }
      apiGet.country.getCountry(params).then(res=>{
        //console.log(res)
        this.country=res.content;
        // for(var i=0;i<4;i++){
        //   this.country.push(res.content)
        // }
      })
    }
  },
  mounted () {
    this.getLogData();
  }
};
</script>

<style scoped>
.handle-date{
    width:424px;
    height: 30px;   
    display:inline-block;
    /* vertical-align:top; */
    margin:0 20px 10px 0;
}
.itemType-small{
  font-size: 0.7rem;
  color: #666;
}
.handle-box {
  margin-bottom: 20px;
}
.handle-select {
  width: 120px;
}
.handle-input {
  width: 300px;
  display: inline-block;
}
.item {
  margin-bottom: 18px;
  cursor: pointer;
}
.item:hover {
  color: #44b549;
}
.curgroup {
  color: #44b549;
}
</style>